<template>
	<view>
		<!-- 使用组件，组件名当标签使用 -->
		<SearchLink />
		<!-- 主体部分 -->
		<view class="content" v-if="categoryList[activeIndex]">
			<view class="left">
				<view class="cate1 " :class="{ active: index === activeIndex }" v-for="(cate1, index) in categoryList" :key="index" @click="selectCate1(index)">{{ cate1.cat_name }}</view>
			</view>
			<scroll-view class="right" scroll-y="true" :scroll-top="scrollTop" @scroll="scroll">
				<view>
					<image class="banner" src="/static/images/titleImage.png" mode=""></image>
					<!-- 二级分类 -->
					<view class="cate2" v-for="(cate2, index2) in categoryList[activeIndex].children" :key="index2">
						<view class="title">
							/
							<text>{{ cate2.cat_name }}</text>
							/
						</view>
						<!-- 三级分类列表 -->
						<view class="cate3-wrapper">
							<view class="cate3" v-for="(cate3, index3) in cate2.children" :key="index3" @click="toSearchList(cate3.cat_name)">
								<image :src="cate3.cat_icon" mode=""></image>
								<view class="">{{ cate3.cat_name }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
// 引入组件
import SearchLink from '@/components/SearchLink';

export default {
	components: {
		// 组件名:组件
		SearchLink
	},
	data() {
		return {
			activeIndex: 0,
			// 分类列表数组
			categoryList: [],
			scrollTop: 0,
			// 记录当前滚动条的位置
			old: {
				scrollTop: 0
			}
		};
	},
	onLoad() {
		this.getCategoryList();
	},
	methods: {
		// 跳转搜索列表
		toSearchList(catName) {
			uni.navigateTo({
				// 使用绝对路径
				url: '/pages/search_list/search_list?catName=' + catName
			});
		},
		// 请求分类列表
		async getCategoryList() {
			this.categoryList = await this.$request({
				url: '/api/public/v1/categories'
			});
		},
		// 滚动时会触发
		scroll: function(e) {
			console.log(e);
			this.old.scrollTop = e.detail.scrollTop;
		},
		// 选择一级分类
		selectCate1(index) {
			//同时让右侧scroll-view滚动到顶部
			this.scrollTop = this.old.scrollTop; // 先滚动到上一次位置
			this.$nextTick(() => {
				//data属性变化，对应的dom更新后
				this.scrollTop = 0;
			});
			this.activeIndex = index;
		}
	}
};
</script>

<style lang="less">
.content {
	display: flex;
	position: absolute;
	left: 0;
	right: 0;
	top: 100rpx;
	bottom: 0;
	.left {
		overflow: auto;
		width: 198rpx;
		.cate1 {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			border-bottom: 1rpx solid #eee;
			box-sizing: border-box;
			background-color: #f4f4f4;
			color: #333;
			&.active {
				background-color: #fff;
				color: #eb4450;
				// 相对于父元素
				position: relative;
				font-weight: bold;
				&::before {
					position: absolute;
					content: '';
					left: 0;
					top: 20rpx;
					width: 8rpx;
					height: 60rpx;
					background-color: #eb4450;
				}
			}
		}
	}
	.right {
		flex: 1;
		padding: 20rpx 16rpx 0;
		overflow: scroll;
		.banner {
			width: 520rpx;
			height: 180rpx;
		}
		.cate2 {
			margin-bottom: 40rpx;
			.title {
				text-align: center;
				color: #e0e0e0;
				height: 110rpx;
				line-height: 110rpx;
				text {
					color: #333;
					// 行内元素,margin上下不生效,左右是生效的
					margin: 0 30rpx;
				}
			}
		}

		.cate3-wrapper {
			display: flex;
			flex-wrap: wrap;
		}
		.cate3 {
			width: 33.33%;
			text-align: center;
			margin-bottom: 20rpx;
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
}
</style>
